<template>
    <fieldset>
        <legend>购物车</legend>
        <h1>购物车:cart</h1>
        <ul>
            <li v-for="item in cartData" :key="item.id">
                <b>
                    商品：{{ item.title }}
                </b>
                ———————
                <b>
                    价格：{{ item.price }}
                </b>
                ———————
                <b>
                    数量：{{ item.count }}
                </b>
                <button @click="removeCart(item)">减少</button>
            </li>
        </ul>
        <h1>商品总价为：{{ total }}元</h1>

    </fieldset>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
    computed: {
        ...mapState('cart', ['cartData']),
        ...mapGetters('cart', ['total']),
        ...mapState('product', ['productData'])

    },
    methods: {
        ...mapMutations('cart', ['delone']),

        removeCart(current) {
            current.count--;

            console.log(current);
            if (current.count === 0) {
                let newarr = this.cartData.filter(item => item.id !== current.id)
                this.delone(newarr)

            }
            this.productData.map((item) => {
                if (current.id === item.id) {
                    item.inventory++
                }
            })
        },



    }

}
</script>